<script setup lang="ts">
import { provide, toRefs } from "vue";
import type { ToggleViewContext } from "@/components/framework/toggle-view-helper";

/* 切换视图组件 */

defineOptions({ name: "toggle-view" });

const props = defineProps<{
  activeKey?: string;
}>();

const emits = defineEmits<{
  (e: "update:active-key", key: string): void;
}>();

const propsRef = toRefs(props);
provide("toggle-view:active-key", propsRef.activeKey);

const ctx: ToggleViewContext = {
  switchView: (key: string) => emits("update:active-key", key),
};
provide("toggle-view:ctx", ctx);
defineExpose(ctx);
</script>

<template>
  <slot />
</template>
